<template>
  <a-button
    class="editable-add-btn"
    style="width: 120px"
    type="primary"
    @click="onOpen"
    :disabled="loading"
  >
    备份数据恢复
  </a-button>
  <a-modal
    v-model:open="open"
    :title="modalTitle"
    @ok="confirm"
    :closable="false"
    :maskClosable="false"
  >
    <template #footer>
      <a-button v-if="opreating === 0" key="cancel" @click="handleCancel"
        >取消</a-button
      >
      <a-button
        v-if="opreating === 0"
        key="submit"
        type="primary"
        :loading="loading"
        @click="confirm"
        >确认</a-button
      >

      <div v-if="opreating === 1"></div>
      <a-button v-if="opreating === 2" key="cancel" @click="handleCancel"
        >关闭</a-button
      >
    </template>
    <div v-if="opreating === 0">是否确认恢复备份数据？</div>
    <div v-if="opreating === 1">数据恢复中，请不要进行其他操作……</div>
    <div v-if="opreating === 2">
      <p>备份数据恢复已完成。</p>
      <p>
        本次已恢复系统数据到
        {{ backupData }} 所备份的状态
      </p>
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { recoverBackup } from '@/api/backup.js'

let modalTitle = '备份数据恢复'
let backupData = ref('')
/**
 * 事件定义
 */
let emit = defineEmits(['operated'])
/**
 * 全局
 */

/**
 * 操作
 */
let opreating = ref(0)
let loading = ref(false)
let open = ref(false)

async function confirm() {
  opreating.value = 1
  loading.value = true
  try {
    let result = (await recoverBackup()) || {}
    backupData.value = result.data
    opreating.value = 2
  } catch (e) {
    loading.value = false
    opreating.value = 0
  }
}
function handleCancel() {
  open.value = false
  loading.value = false
  opreating.value = 0
}
/**
 * 打开气泡
 */
function onOpen() {
  open.value = true
}
</script>
<style lang="less" scoped></style>
